<template>
  <div class="give-record">
    <!-- 会员赠送 -->
    <div class="app-main-content-box content">
      <!-- 筛选 -->
      <!-- <div class="list-filter">
        <el-collapse>
          <el-collapse-item title="按条件筛选" name="1">
            <div>
              <el-form ref="ruleForm" label-width="120px" size="mini">
                <el-form-item label="筛选类型："></el-form-item>
                <el-form-item size="large">
                  <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-plus"
                    @click="submitForm('ruleForm')"
                  >筛选</el-button>
                  <el-button size="mini" icon="el-icon-refresh" @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>-->
      <!-- 表格 -->
      <div v-loading="tableLoading" class="list-table" element-loading-text="加载中">
        <el-table
          v-loading="tableLoading"
          :data="list"
          border
          stripe
          style="width: 100%"
          empty-text="暂无数据"
        >
          <el-table-column prop="memberGiveRecord.createTime" label="赠送时间" fixed />
          <el-table-column label="来源">
            <template slot-scope="scope">
              <span>{{ sourceOption[scope.row.memberGiveRecord.source] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="memberGiveRecord.categoryName" label="会员卡" />
          <el-table-column label="附赠余额(元)">
            <template slot-scope="scope">
              <span>{{ scope.row.memberGiveRecord.extraBalance|parseNumberToThousands }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="giverName" label="赠送人" />
          <el-table-column label="状态">
            <template slot-scope="scope">
              <span>{{ statusOption[scope.row.memberGiveRecord.status] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="receiverName" label="兑换人" />
          <el-table-column prop="memberGiveRecord.receiveTime" label="兑换时间" />
          <el-table-column label="操作" fixed="right" width="120">
            <template slot-scope="scope">
              <div style="text-align:left">
                <el-button
                  v-if="scope.row.memberGiveRecord.source==='admin'"
                  type="text"
                  size="small"
                  @click="openGiveDetail(scope.row.memberGiveRecord.receiveCode)"
                >详情</el-button>
                <el-button
                  v-if="scope.row.memberGiveRecord.source==='admin'&&scope.row.memberGiveRecord.status===1&&!$store.getters.banBtnList.includes('BTN_MEMBER_GIVING')"
                  type="text"
                  size="small"
                  @click="stopGive(scope.$index, scope.row)"
                >停止领取</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination-direction
          v-if="paginationConfig.total!==0"
          :config="paginationConfig"
          @sizeschange="sizesChange"
          @pagechange="pageChange"
        />
      </div>
    </div>

    <!-- // 赠送弹窗 -->
    <!-- // <dialog-give-vip ref="giveVip" @openGiveDetail="openGiveDetail"></dialog-give-vip> -->
    <!-- 赠送详情 -->
  </div>
</template>

<script>
import { getGiveVipCardRecordList, cancelGiveVipCardRecord } from '@/api/vip'
import DialogGiveVip from './DialogGiveVip'
export default {
  components: {
    DialogGiveVip
  },
  props: {
    tabName: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      // 配置
      paginationConfig: {
        // 分页配置
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      statusOption: [
        // 赠送会员卡状态
        '未支付',
        '未领取',
        '已领取',
        '已撤销',
        '已过期',
        '支付失败'
      ],
      sourceOption: { admin: '商户后台', wxapp: '微信小程序' }, // 来源
      // 状态
      tableLoading: true, // 表格loading
      stopLoading: false,
      // 数据
      list: [] // 赠送记录
    }
  },
  watch: {
    tabName(val) {
      if (val === 'record') {
        this.initData()
      }
    }
  },
  mounted() {
    // 页面初始化
    this.initData()
  },
  methods: {
    /**
       *  获取数据
       */
    // 获取赠送记录
    initData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      const params = {}
      params.page = page
      params.pageSize = pageSize
      getGiveVipCardRecordList(params)
        .then(res => {
          this.tableLoading = false
          this.list = res.data.list
          this.paginationConfig.total = res.data.total
          this.paginationConfig.page = res.data.pageNum
        })
        .catch(err => {
          this.tableLoading = false
        })
    },

    // 分页sizes改变
    sizesChange() {
      this.initData()
    },

    // 分页page改变
    pageChange() {
      this.initData()
    },

    // 根据code获取详情
    openGiveDetail(code) {
      this.$emit('openGiveDetail', code)
    },

    /**
       *  按钮组
       */
    // 停止领取
    stopGive(index, row) {
      this.$confirm('您确定要停止该会员卡的赠送, 是否继续?', '停止领取', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
        roundButton: true
      }).then(() => {
        this.stopLoading = true
        cancelGiveVipCardRecord(row.memberGiveRecord.id)
          .then(res => {
            this.stopLoading = false
            this.list[index].status = 3
            this.$notify({
              title: '成功',
              message: '该会员卡已停止赠送',
              type: 'success',
              duration: 2000,
              offset: 40
            })
          })
          .catch(err => {
            this.stopLoading = false
          })
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .content {
    /* 表格 */
    .list-table {
      .el-table {
        margin-bottom: 10px;
      }
    }
  }
</style>
